﻿/*
***************************************************************************************
 * STYLES @media: all
 * Adaptive style // Mobile approach
 * Author: valerie@wephic.net
 *
***************************************************************************************
 */

/*
 * ANTISCREEN
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 * License: none (public domain)
**********************************************/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers
----------------------------------------------*/
article,aside,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}

/* Hide any HRs used in the layout, but show them in main content */
hr,
.ahem,
#skip-link {
  display: none;
}
#content hr {
  display: block;
}

/*
 * COLOURS
 *  - purple:		179,89,159
 *    purple light:	247,238,245
 *  - green:		118,189,65
 *  - yellow:		254,232,79
 *    yellow light 1:	255,254,246
 *    yellow light 2:	255,250,213
 *  - brown:		202,155,16
 *    brown light:	250,245,231
 *  - dark:		34,24,21
 *  - red:		223,0,16
 *
********************************************************************/

/*
 * GENERIC + CLASSES
**********************************************/
html{/*Fix text size on orientation change on mobile*/
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
}
body{
    background-color:rgb(255,254,246);
    color:rgb(34,24,21);
    direction:ltr;
    font:62.5%/100%;
    height:100%;
}
img{
    max-width:100%;
    height:auto;
}
/* Typography
----------------------------------------------*/
h1{
    font-size:250%;
    font-weight:700;
    line-height:150%;
    margin-bottom:.5em;
}
#page-title{
    background-color: rgba(202, 155, 16, 0.1);
}
h2{
    font-size:190%;
    font-weight:700;
    line-height:150%;
    margin-bottom:.5em;
}
h3{
    font-size:155%;
    font-weight:700;
    line-height:150%;
    margin-bottom:.5em;
}
h4{
    font-size:155%;
    font-weight:400;
    line-height:150%;
    margin-bottom:.5em;
}
p,blockquote,li,dt,dd,caption{
    font-size:120%;
    line-height:150%;
    margin-bottom:.5em;
}
li li{
    font-size:100%;
    line-height:100%;
}
em{
    font-style:oblique;
}
b,strong{
    font-weight:700;
}
blockquote,figure{
    border:1px solid rgb(202,155,16);
    padding:2px;
}
abbr[title]{
    border-bottom:1px dotted rgb(202,155,16);
}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline;
}
sup{
    top:-0.5em;
}
sub{
    bottom:-0.25em;
}
/* Links
----------------------------------------------*/
a,a:link{
    outline:none;
    text-decoration:none;
    color:rgb(179,89,159);
}
a:visited{
}
a:hover,
a:active,
a:focus{
    background-color:rgb(247,238,245);
}
/* Lists
----------------------------------------------*/
ul{
    list-style:disc outside;
    margin:0 0 .7em 21px;
    padding:0;
}
ol{
    list-style:decimal outside;
    margin:0 0 .7em 21px;
    padding:0;
}
dl{
    margin:0 0 .7em 0;
    padding:0;
}
dl dt{
    font-weight:700;
    padding-left:21px;
}
dl dd{
    padding-left:21px;
}
/* Table
----------------------------------------------*/
table{
    border:3px double rgb(202,155,16);
    border-collapse:separate;
    border-spacing:0;
    empty-cells:show;
    text-align:left;
    margin:10px;
}

th,td{
    font-size:120%;
    line-height:150%;
    padding:2px;
}
th{
    font-weight:700;
}
thead th{
    background-color:rgb(34,24,21);
    color:rgb(255,255,255);
}
tfoot th,tfoot td{
    border-top:1px solid rgb(202,155,16);
}
/*
 * LAYOUT
**********************************************/

/* Header
----------------------------------------------*/
#page #header{text-align:center;}
/*-- Header --*/
#logo,#logo img{display:inline-block;}
a#logo:hover,a#logo:active,a#logo:focus{background-color:rgb(247,238,245);}
/*-- Name & Slogan --*/
#name-and-slogan{
    color:rgb(255,254,246);
    background-color:rgb(34,24,21);/* Old browsers */
    font-size:150%;
    padding:5px;
}
#name-and-slogan p{margin:0;}
#breadcrumb{
    margin-bottom:.5em;
    padding:5px;
    background-color:rgb(255,254,246);
}
#footer{
/*border-bottom:1px solid rgb(254,232,79);border-top:1px solid rgb(254,232,79);*/
margin:5px 0 0 0;padding:10px;font-size:90%;
background: url();
background: -moz-linear-gradient(top,  rgba(118,189,65,0.1) 0%, rgba(118,189,65,0.01) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,189,65,0.1)), color-stop(100%,rgba(118,189,65,0.01)));
background: -webkit-linear-gradient(top,  rgba(118,189,65,0.1) 0%,rgba(118,189,65,0.01) 100%);
background: -o-linear-gradient(top,  rgba(118,189,65,0.1) 0%,rgba(118,189,65,0.01) 100%);
background: -ms-linear-gradient(top,  rgba(118,189,65,0.1) 0%,rgba(118,189,65,0.01) 100%);
background: linear-gradient(to bottom,  rgba(118,189,65,0.1) 0%,rgba(118,189,65,0.01) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a76bd41', endColorstr='#0376bd41',GradientType=0 );

}
#footer ul,#footer li{list-style:none;margin:0;padding:0;display:inline-block;}
#footer li{}
#footer a,#footer a:link{color:rgb(202,155,16);border-right:1px solid rgb(202,155,16);padding:0 5px;}
#footer li:last-child a{border:none 0;}
#footer a:visited{}
#footer a:hover,#footer a:active,#footer a:focus{background-color:transparent;text-decoration:underline;}
#footer p{display:inline-block;float:right;}
/* Navigationborder:2px solid rgb(254,232,79)
----------------------------------------------*/
/*-- Skip --*/
#skip-link{margin:0;}
#skip-link a{display:block;}

/*-- Main menu --*/
#navigation{}
#navigation .section{}
#block-system-main-menu ul{list-style:none;margin:0;font-weight:700;}
#block-system-main-menu .menu li{margin:0 0 1px 0;list-style:none;padding:0;border-bottom:1px solid rgb(254,232,79);}
#block-system-main-menu .menu li li{border:none 0;}
#block-system-main-menu .menu li.active-trail{background-color:rgba(254,232,79,.05);}
#block-system-main-menu .menu li.active-trail li{background-color:transparent;}
#block-system-main-menu .menu li li li{background:url(images/bullets/purple.png) no-repeat 0 .3em;padding:0 0 0 10px;}
#block-system-main-menu .menu li a{padding:5px;display:block;color:rgb(179,89,159);}
#block-system-main-menu .menu li a:hover,#block-system-main-menu .menu li a:active,#block-system-main-menu .menu li a:focus{color:rgb(34,24,21);background-color:transparent;}
#block-system-main-menu .menu li a.active{color:rgb(34,24,21);}
#block-system-main-menu li .menu{margin:5px 10px 10px 10px;padding:0 0 0 5px;border-left:1px dotted rgb(254,232,79);}
#block-system-main-menu li .menu .menu{margin:5px 5px 5px 10px;padding:0;border:none 0;}


/* Main Content
----------------------------------------------*/
#content{background-color:rgb(255,250,213);padding:2px;}

/* Views
----------------------------------------------*/
.block-views{/*background-color:rgba(202,155,16,.1);border:2px solid rgb(202,155,16);border-width:2px 0 1px 0;*/padding:2px;margin:0 0 1em 0;
-moz-box-shadow:0 3px 4px -4px rgb(202,155,16);
-webkit-box-shadow:0 3px 4px -4px rgb(202,155,16);
box-shadow:0 3px 4px -4px rgb(202,155,16);
}
.block-views .block-inner{padding:0;margin:0;}
.block-views h2{background-color:rgb(202,155,16);color:rgb(255,255,255);padding:5px;}
.block-views .block-content{background-color:rgb(250,245,231);padding:2px;}
.block-views .views-row{margin-bottom:2px;}
.block-views li.views-row{border:none 0;padding:0;}
.block-views .views-row h3{background-color:rgba(202,155,16,.1);margin:0 0 .5em 0;font-weight:400;}
.block-views li.views-row h3{font-size:100%;font-weight:400;}
.block-views .views-row h3 a{display:block;padding:2px;}
/*.block-views .views-row h3 a:hover,.block-views .views-row h3 a:active,.block-views .views-row h3 a:focus{background-color:rgb(179,89,159);color:rgb(255,255,255);}*/
.block-views .views-field-body,.block-views .views-field-field-date{padding:0 4px;}

/*-- Featured Pages --*/
#block-views-feature-pages-block h2{margin:0 0 .5em 0;}
#block-views-feature-pages-block ul{list-style:none;margin:0;}
#block-views-feature-pages-block ul li{margin:0 0 2px 0;}
#block-views-feature-pages-block ul li.views-row-last{margin:0}

/*-- Slides Show --*/
#block-views-slide-show-block:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#block-views-slide-show-block h2{margin:0;}
.flexslider{background-color:transparent;border:none 0;}
.flexslider .slides > li:first-child{display:block;}
.flexslider .flexslider_views_slideshow_slide{font-size:.9em;margin:0;overflow:hidden;padding:0;position:relative;width:100%;z-index:0;}
.flexslider .views-field-title,.flexslider .views-field-view-node,.flexslider .views-field-body{background-color:rgba(255,250,213,.8);padding:2%;}
.js .flexslider .views-field-title{margin-top:30px;}
.flexslider .views-field-title h3,.flexslider .views-field-body p,.flexslider .views-field-view-node p{margin:0;}
.flexslider .views-field-view-node p{text-align:right;}
.flexslider .views-field-view-node p a{display:inline-block;padding:2px;background-color:rgb(179,89,159);color:rgb(255,254,246);}
.flexslider .views-field-field-slide-image{width:100%;bottom:0;position:absolute;z-index:-1;}

.flex-nav-container{margin:0;}
.js .flex-direction-nav,.js .flex-pauseplay{position: absolute;top:2px;}
.js .flex-control-nav{top:10px;}
.js .flex-control-nav{width:36%;left:50%;bottom:auto;}
.js .flex-control-nav li a{background-image:none;background-color:rgb(217,172,207);}
.js .flex-control-nav li a:hover,.js .flex-control-nav li a:focus,.js .flex-control-nav li a.active{background-color:rgb(179,89,159);}
.js .flex-direction-nav{width:54%;left:41%;}
.js .flex-direction-nav a{width:25px;height:25px;top:0;margin:0;overflow:hidden;}
.js .flex-direction-nav a.prev,.js .flex-direction-nav a.next{background-position:0 0;/*background-color:rgb(217,172,207);*/}
/*.js .flex-direction-nav a.prev:hover,.js .flex-direction-nav a.prev:focus,.js .flex-direction-nav a.next:hover,.js .flex-direction-nav a.next:focus{background-color:rgb(179,89,159);}*/
.js .flex-direction-nav a.prev{left:0;background-image:url(images/icons/prev.png);}
.js .flex-direction-nav a.next{right:0;background-image:url(images/icons/next.png);}
.flex-pauseplay{left:5%;}
.flex-pauseplay span{background-position:0 0;background-repeat:no-repeat;background-image:url(images/icons/play.png);cursor:pointer;display:block;width:25px;height:25px;position:absolute;text-indent:-999em;}
.flex-pauseplay .pause{background-image:url(images/icons/pause.png);}


/*
*************************************************
 * MOBILE STYLES - 320
 * Notes: this is not working on IE6/7/8
 * - only screen media
 * - 320px <= width
*************************************************
*/
@media only screen and (min-device-width:321px) and (min-width:321px){

/* Views
----------------------------------------------*/
/*-- Slides Show --*/
.flexslider .views-field-title,.flexslider .views-field-view-node,.flexslider .views-field-body{width:70%;margin-left:20%;}
.flexslider .flexslider_views_slideshow_slide{font-size:.9em;margin:0;}
#name-and-slogan{
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(top,  rgba(83,76,75,1) 0%, rgba(34,24,21,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,76,75,1)), color-stop(100%,rgba(34,24,21,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(83,76,75,1) 0%,rgba(34,24,21,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(83,76,75,1) 0%,rgba(34,24,21,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(83,76,75,1) 0%,rgba(34,24,21,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(83,76,75,1) 0%,rgba(34,24,21,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#534c4b', endColorstr='#221815',GradientType=0 ); /* IE6-8 */
}
#navigation .section{padding:10px;}
/*-- Slides Show --*/ 
.views-field-view-node p a{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url();
background: -moz-linear-gradient(top,  rgba(179,89,159,1) 0%, rgba(153,76,135,1) 44%, rgba(179,89,159,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,89,159,1)), color-stop(44%,rgba(153,76,135,1)), color-stop(100%,rgba(179,89,159,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(179,89,159,1) 0%,rgba(153,76,135,1) 44%,rgba(179,89,159,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(179,89,159,1) 0%,rgba(153,76,135,1) 44%,rgba(179,89,159,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(179,89,159,1) 0%,rgba(153,76,135,1) 44%,rgba(179,89,159,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(179,89,159,1) 0%,rgba(153,76,135,1) 44%,rgba(179,89,159,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3599f', endColorstr='#b3599f',GradientType=0 ); /* IE6-8 */
padding:10px;
}
#content,
#page-title,
#name-and-slogan,
#block-views-slide-show-block h2,
.block-views h2,
.block-views .views-row h3,
.block-views .views-row h3 a,
.views-field-view-node p a,
#footer{
-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-khtml-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;
}
}/* end @media only screen 320px <= width */

/*
*************************************************
 * MOBILE STYLES - 480
 * Notes: this is not working on IE6/7/8
 * - only screen media
 * - 480px <= width
*************************************************
*/
@media only screen and (min-device-width:481px) and (min-width:481px){

/* Views
----------------------------------------------*/
/*-- Slides Show --*/
.flexslider .flexslider_views_slideshow_slide{font-size:.9em;margin:0;}
.flexslider .views-field-title,.js .flexslider .views-field-title{margin-top:50px;}
/* Layout
----------------------------------------------*/
#page #header{
  float:left;
  width:200px;
}
#navigation{
  padding:0 10px 0 210px;
}
#navigation .section {
    padding:0;
}
}/* end @media only screen 480px <= width */

/*
*************************************************
 * PAD STYLES
 * Notes:this is not working on IE6/7/8
 * - only screen media
 * - 640px <= width
*************************************************
*/
@media only screen and (min-device-width:641px) and (min-width:641px){

/* Layout
----------------------------------------------*/
#navigation,
#page #header{width:200px;padding:0;float:left;clear:left;}
#navigation{margin-top:1em;}
#navigation .section{margin:0;}
#name-and-slogan{font-size:150%;}
#main-wrapper{padding-left:210px;}
#content{padding:0;}
#page-title{padding:0 10px;}
#block-system-main{padding:0 10px;margin-bottom:1em;min-height: 100%;}


/* Views
----------------------------------------------*/
/*-- Slides Show --*/
.flexslider .views-field-title,.flexslider .views-field-view-node,.flexslider .views-field-body{width:50%;margin-left:41%;}
.flexslider .views-field-view-node{margin-bottom:2px;}
.js .flex-direction-nav,.js .flex-pauseplay{top:10px;}
.js .flex-control-nav{top:15px;}
}/* end @media only screen 640px <= width */

/*
*************************************************
 * SCREEN STYLES
 * Notes:this is not working on IE6/7/8
 * - only screen media
 * - 960px <= width
*************************************************
*/
@media only screen and (min-device-width:961px) and (min-width:961px){

/* Layout 
----------------------------------------------*/
#page{width:960px;margin:0 auto;}
/* Views
----------------------------------------------*/
/*-- Slides Show --*/
#block-views-slide-show-block{margin:0;}
.flexslider .views-field-title,.js .flexslider .views-field-title{margin-top:80px;}
.flexslider .views-field-view-node{margin-bottom:20px;}
.js .flex-direction-nav,.js .flex-pauseplay{top:40px;}
.js .flex-control-nav{top:45px;}
/* -- Events News --*/
#block-views-news-block{position:relative;top:-20px;float:left;width:47.4%;margin:0 1%;}
#block-views-events-block{position:relative;top:-20px;float:right;width:47.4%;margin:0 1%;}

/*-- Featured Pages --*/
#block-views-feature-pages-block{clear:both;}
#block-views-feature-pages-block .views-row{float:left;width:31.3%;margin:0 1%;}
}/* end @media only screen 940px <= width */